<template>
  <div class="container">
    <div>
      <el-row type="flex" :gutter="10" justify="space-between">
        <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="查 询 日 期：">
              <!-- <el-radio v-model="form.radioData" label="日">按日期：</el-radio> -->
              <!-- <span>查询日期：</span> -->
              <el-date-picker
                v-model="form.valueDay"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="查 询 类 型：">
              <el-select
                style="min-width: 140px"
                v-model="form.queryType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in form.queryTypeList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="查 询 区 域：">
              <el-select
                style="min-width: 110px"
                v-model="form.queryArea"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in form.queryAreaList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="车 辆 类 型：">
              <el-select
                style="min-width: 110px"
                v-model="form.cph"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in form.cphList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <!-- <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="开始时间(时)：">
              <el-select
                style="min-width: 66px"
                v-model="form.StartDate"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in form.hourList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6">
          <el-form ref="form" :model="form" style="margin-left: ">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
            <el-button size="mini" type="success" @click="showRanking"
              >统计排名</el-button
            >
          </el-form>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="10" justify="space-between">
        <!-- <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
           <el-form-item label="组 织 机 构：" >
              <el-select
                style="min-width: 145px"
                v-model="form.groupingValue"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in form.groupingList"
                  :key="item.index"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="出行距离(米)：">
              <el-input
                v-model="form.distance"
                placeholder="请输入车辆出车距离"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="出行时间(分钟)：">
              <el-input
                v-model="form.time"
                placeholder="请输入车辆出车时间"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- <el-col :span="6">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="结束时间(时)：">
              <el-select
                style="min-width: 66px"
                v-model="form.EndDate"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in form.hourList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6"> </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
      v-loading="loading"
    >
      <!-- 区域 数量  下属部门 车辆名称    车辆类型 开始出行时间  结束出行时间 出行总时长   出行总里程 -->
      <el-table-column
        prop="区域"
        label="区域"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="下属部门"
        label="下属部门"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="车辆名称"
        label="车辆名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="车辆类型"
        label="车辆类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="开始出行时间"
        label="开始出行时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="结束出行时间"
        label="结束出行时间"
      ></el-table-column>
      <el-table-column prop="出行总时长" label="出行总时长"></el-table-column>
      <el-table-column prop="出行总里程" label="出行总里程"></el-table-column>

      <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog title="统计排名" :visible.sync="showRankingDialog">
      <el-table
        :data="form.selectCarType"
        style="width: 100%"
        :default-sort="{ prop: 'count', order: 'descending' }"
        show-summary
        :key="Math.random()"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column
          prop="label"
          label="区域"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="count"
          label="数量"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      showRankingDialog: false,
      form: {
        queryArea: '全部',
        queryAreaList: [{
          value: '全部',
          label: '全部'
        }],
        queryType: '1',
        queryTypeList: [{//早高峰为1，晚高峰为2
          value: '1',
          label: '早高峰'
        }, {
          value: '2',
          label: '晚高峰'
        }],
        distance: 3000,
        time: 30,
        groupingList: [],
        groupingValue: '',
        cphList: [],
        selectCarType: null,
        rubbishVehicleType: [{
          value: '全部',
          label: '全部'
        }, {
          value: '餐厨车',
          label: '餐厨车'
        }, {
          value: '勾臂车',
          label: '勾臂车'
        }, {
          value: '挤压车',
          label: '挤压车'
        }, {
          value: '吸粪车',
          label: '吸粪车'
        }, {
          value: '小型垃圾车',
          label: '小型垃圾车'
        }, {
          value: '有害垃圾车',
          label: '有害垃圾车'
        }, {
          value: '自卸车',
          label: '自卸车'
        }, {
          value: '小型冲洗车',
          label: '小型冲洗车'
        }],
        vehicleType: [{
          value: '全部',
          label: '全部'
        }, {
          value: '机扫车',
          label: '机扫车'
        }, {
          value: '小型机扫车',
          label: '小型机扫车'
        }, {
          value: '吸尘车',
          label: '吸尘车'
        }, {
          value: '洒水车',
          label: '洒水车'
        }, {
          value: '高压清洗车',
          label: '高压清洗车'
        }, {
          value: '洗路车',
          label: '洗路车'
        }, {
        value: '多功能洗扫车',
        label: '多功能洗扫车'
        }, {
          value: '除雪车',
          label: '除雪车'
        }],
        cph: '全部',//车牌号
        hourList: [{
          value: '0',
          label: '0时'
        }, {
          value: '1',
          label: '1时'
        }, {
          value: '2',
          label: '2时'
        }, {
          value: '3',
          label: '3时'
        }, {
          value: '4',
          label: '4时'
        }, {
          value: '5',
          label: '5时'
        }, {
          value: '6',
          label: '6时'
        }, {
          value: '7',
          label: '7时'
        }, {
          value: '8',
          label: '8时'
        }, {
          value: '9',
          label: '9时'
        }, {
          value: '10',
          label: '10时'
        }, {
          value: '11',
          label: '11时'
        }, {
          value: '12',
          label: '12时'
        }, {
          value: '13',
          label: '13时'
        }, {
          value: '14',
          label: '14时'
        }, {
          value: '15',
          label: '15时'
        }, {
          value: '16',
          label: '16时'
        }, {
          value: '17',
          label: '17时'
        }, {
          value: '18',
          label: '18时'
        }, {
          value: '19',
          label: '19时'
        }, {
          value: '20',
          label: '20时'
        }, {
          value: '21',
          label: '21时'
        }, {
          value: '22',
          label: '22时'
        }, {
          value: '23',
          label: '23时'
        }, {
          value: '24',
          label: '24时'
        }],
        alermTypeList: [{ label: '1分钟', value: '1' }, { label: '5分钟', value: '5' }, { label: '10分钟', value: '10' }, { label: '30分钟', value: '30' }],
        alermTypeValue: '5',
        StartDate: '0',
        EndDate: new Date().getHours().toString(),
        valueDay: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      },
      originalData: [],
      tableData: [],
      tableHead: [],
      loading: false,
      URLByTYPE: ''
    }
  },
  mounted () {

    // this.getlistdata()
    // if (localStorage.getItem('CurrentService') === '001') {
    //   this.URLByTYPE = 'Vehicle'
    //   this.form.cphList = this.form.vehicleType
    // }
    // if (localStorage.getItem('CurrentService') === '003') {
    //   this.URLByTYPE = 'RubbishVehicle'
    //   this.form.cphList = this.form.rubbishVehicleType
    // }
    this.getlistdata()
  },
  methods: {
    showRanking () {
      this.showRankingDialog = true;
    },
    //获取车辆分组列表
    // async getGroupingList () {
    //   var url = 'Vehicle/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
    //   let { data } = await this.$Http.get(url)
    //   this.form.groupingList = data
    //   this.form.groupingValue = data[0].CLIENT_NO
    //   // this.searchAction()
    //   this.getlistdata()
    // },
    //获取车牌列表
    // async getLisencePlateList () {
    //   this.form.cph = ''
    //   var url = this.URLByTYPE + '/GetVehicleCarListSelect?ClientNo=' + this.form.groupingValue
    //   const { data } = await this.$Http.get(url)
    //   this.form.cphList = data
    //   // this.form.cphList.unshift({ "LicensePlate": "全部" })
    // },
    // searchAction () {
    //   if (this.form.queryType === '1') {
    //     this.tableHead = [
    //       {
    //         label: '车辆类型',
    //         property: 'CAR_TYPE'
    //       }, {
    //         label: '现有车辆数',
    //         property: 'ALLNUM'
    //       }, {
    //         label: '作业车辆数',
    //         property: 'CURRENTNUM'
    //       }, {
    //         label: '作业比率',
    //         property: 'currentRatio'
    //       }
    //     ]
    //   } else {
    //     this.tableHead = [
    //       {
    //         label: '所属区县',
    //         property: 'GROUPNAME'
    //       }, {
    //         label: '现有车辆数',
    //         property: 'ALLNUM'
    //       }, {
    //         label: '作业车辆数',
    //         property: 'CURRENTNUM'
    //       }, {
    //         label: '作业比率',
    //         property: 'currentRatio'
    //       }
    //     ]
    //   }
    //   this.getlistdata()
    // },
    async getlistdata () {
      this.currentPage = 1;
      this.tableData = [];
      this.form.queryAreaList = [{
        value: '全部',
        label: '全部'
      }];
      this.form.selectCarType = [{
        value: '0000001',
        label: '河西区城管委',
        count: 0
      }, {
        value: '0000005',
        label: '和平区城管委',
        count: 0
      }, {
        value: '0000004',
        label: '南开区城管委',
        count: 0
      }, {
        value: '0000006',
        label: '河东区城管委',
        count: 0
      }, {
        value: '0000007',
        label: '河北区城管委',
        count: 0
      }, {
        value: '0000009',
        label: '东丽区城管委',
        count: 0
      }, {
        value: '0000011',
        label: '西青区城管委',
        count: 0
      }, {
        value: '0000008',
        label: '红桥区城管委',
        count: 0
      }, {
        value: '0000015',
        label: '武清区城管委',
        count: 0
      }, {
        value: '0000016',
        label: '静海区城管委',
        count: 0
      }, {
        value: '0000017',
        label: '宁河区城管委',
        count: 0
      }, {
        value: '0000010',
        label: '津南区城管委',
        count: 0
      }, {
        value: '0000012',
        label: '北辰区城管委',
        count: 0
      }, {
        value: '0000019',
        label: '滨海新区城管委',
        count: 0
      }, {
        value: '0000014',
        label: '蓟州城管委',
        count: 0
      }, {
        value: '0000018',
        label: '宝坻区城管委',
        count: 0
      }]
      this.form.queryAreaList = [{
        value: '全部',
        label: '全部'
      }];
      this.loading = true
      // var url = 'Vehicle/GetChucheDistance?ClientNo=0000009&StartDate=2&EndDate=8&cartype=全部&juli=0.5&type=1'
      var url = 'Vehicle/GetVehicleGaoFengInfoCity?date=' + this.form.valueDay + '&distance=' + (this.form.distance / 1000) + '&type=' + this.form.queryType + '&ClientNo=00000&time=' + this.form.time
      const { data } = await this.$Http.get(url)
      var areaStr = null
      data.forEach(element => {
        if (element.区域 == '') {
          element.区域 = areaStr
        } else {
          this.form.queryAreaList.push({
            value: element.区域,
            label: element.区域
          })
          areaStr = element.区域
          this.form.selectCarType.filter(item => {
            if (item.label === element.区域) {
              item.count = parseInt(element.数量)
            }
          })
        }
        if (this.form.queryArea === '全部') {
          this.tableData.push(element);
        } else {
          if (this.form.queryArea === element.区域) {
            this.tableData.push(element);
          }
        }
        // element.currentRatio = (element.CURRENTNUM / element.ALLNUM * 100).toFixed(2) + '%'
      });
      // 原始数据
      // this.tableData = data.splice(1)
      this.loading = false
    },
    // 导出Excel
    exportExcel () {
      // {"排名":"1","区域":"武清区","全部车辆":"43","出动车辆":"30","出车率":"70%"}
      // 区域 数量  下属部门 车辆名称    车辆类型 开始出行时间  结束出行时间 出行总时长   出行总里程
      let excelName = this.form.queryType + '出车率排名'
      var tHeader = ['区域', '车辆名称', '车辆类型', '开始出行时间', '结束出行时间', '出行总时长', '出行总里程']
      var filterVal = ['区域', '车辆名称', '车辆类型', '开始出行时间', '结束出行时间', '出行总时长', '出行总里程']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    //详情
    handleEdit (index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>
